var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form" v-loading.fullscreen.lock="loading">
      <el-form :model="search" :inline="true">
        <el-form-item :label="type===2?'客户代码-客户名称':'供应商代码-供应商名称'">
          <filter-select clearable :options="customerList" v-model="search.customer" value-field="code" label-field="label"
            value-key="id" style="width:200px;" :filter-method="filterMethod">
          </filter-select>
        </el-form-item>
        <el-form-item label="结算付款方式">
          <el-select filterable clearable v-model="search.paymentWay" style="width:140px">
            <el-option v-for="sumMoney in sumMoneyTypeList" :key="sumMoney.value" :value="sumMoney.value" :label="sumMoney.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="search.status" clearable style="width:140px">
            <el-option value="使用"></el-option>
            <el-option value="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  `;

  return {
    props: {
      search: {
        type: Object,
        required: true
      },
      type: {
        type: Number,
        required: true
      }
    },

    data: function () {
      var payWayTypeList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '18', '24'];
      return {
        customerList: [],
        sumMoneyTypeList: i18n.getDropDown('customer.paymentWayType', payWayTypeList),
      };
    },

    created: function () {
      this.initDropdown();
    },

    methods: {
      initDropdown: function () {
        this.loading = true;
        var self = this;
        return ajaxRequest("basicData/getCustomerCode", {
          type: this.type
        }).then(function (customerList) {
          customerList = _.map(customerList, function (customer) {
            var code = customer.customerCode;
            var name = customer.customerName;
            return {
              label: `${code} - ${name}`,
              code: code,
              name: name,
              id:`${code}-${name}`
            };
          });
          self.customerList = customerList;
          self.loading = false;
          return res;
        }).catch(function () {
          self.loading = false;
        });
      },

      filterMethod: function (query, option) {
        var filterParams = ['code', 'name'];
        for (var i = 0; i < filterParams.length; i++) {
          var filterParam = filterParams[i];
          var value = _.get(option, filterParam, '');
          if (value === null) {
            value = '';
          }
          if (typeof value === 'string') {
            value = value.toLowerCase();
          }
          if (value.indexOf(query) !== -1) {
            return true;
          }
        }
        return false;
      }
    },

    components: {
      FilterSelect: FilterSelect
    },

    template: template
  };
}();
